import { FC, useContext } from 'react';
import { DragSource } from 'react-dnd';
import {
  Button,
  Select,
  Input,
  InputNumber,
  DatePicker,
  Switch,
  TimePicker,
  Tree,
  TreeSelect,
  Checkbox,
  Radio,
  Rate,
  Table,
} from 'antd';
import { endDrag, beginDrag, sourceCollect } from '@/utils';
import { DesignProvider, DesignRedux } from '../DesignRedux';

import { treeMock, colMock, tableDataSource } from './mock';

const { Option } = Select;
const { TreeNode } = TreeSelect;
const CheckboxGroup = Checkbox.Group;

const plainOptions = ['Apple', 'Pear', 'Orange'];

const AntdFC: FC<any> = (props: any) => {
  const { property, isDragging, connectDragSource } = props;

  const { dispatch } = useContext(DesignRedux);

  // console.log("=====AntdFC====")

  console.log('property', property);

  const { comName, title } = property;

  // 下拉
  if (comName == 'select') {
    return (
      <Select
        onClick={() => dispatch({ rightEleProperty: property })}
        style={{ width: 200 }}
      >
        <Option value="lucy">Lucy</Option>
        <Option value="lucy2">Lucy2</Option>
      </Select>
    );
  }

  // 按钮
  if (comName == 'button') {
    return (
      <Button type="primary" ref={connectDragSource}>
        {title}
      </Button>
    );
  }

  // 输入框
  if (comName == 'input') {
    return <Input placeholder="Basic usage" />;
  }

  // 数字输入
  if (comName == 'inputNumber') {
    return <InputNumber ref={connectDragSource} placeholder="Basic usage" />;
  }

  // 日期
  if (comName == 'datePicker') {
    return <DatePicker />;
  }

  // 开关
  if (comName == 'switch') {
    return <Switch />;
  }

  // 时间选择
  if (comName == 'timePicker') {
    return <TimePicker />;
  }

  // 树形控件
  if (comName == 'tree') {
    return (
      <Tree
        checkable
        defaultExpandedKeys={['0-0-0', '0-0-1']}
        defaultSelectedKeys={['0-0-0', '0-0-1']}
        defaultCheckedKeys={['0-0-0', '0-0-1']}
        treeData={treeMock}
      />
    );
  }

  // 树选择
  if (comName == 'treeSelect') {
    return (
      <TreeSelect
        showSearch
        style={{ width: '100%' }}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
        placeholder="Please select"
        allowClear
        treeDefaultExpandAll
      >
        <TreeNode value="parent 1" title="parent 1">
          <TreeNode value="parent 1-0" title="parent 1-0">
            <TreeNode value="leaf1" title="leaf1" />
            <TreeNode value="leaf2" title="leaf2" />
          </TreeNode>
          <TreeNode value="parent 1-1" title="parent 1-1">
            <TreeNode
              value="leaf3"
              title={<b style={{ color: '#08c' }}>leaf3</b>}
            />
          </TreeNode>
        </TreeNode>
      </TreeSelect>
    );
  }

  // 多选框
  if (comName == 'checkbox') {
    return <CheckboxGroup options={plainOptions} />;
  }
  // 单选框
  if (comName == 'radio') {
    return (
      <Radio.Group>
        <Radio value={1}>A</Radio>
        <Radio value={2}>B</Radio>
        <Radio value={3}>C</Radio>
        <Radio value={4}>D</Radio>
      </Radio.Group>
    );
  }

  // 评分
  if (comName == 'rate') {
    return <Rate allowHalf defaultValue={2.5} />;
  }

  // 表格
  if (comName == 'table') {
    return <Table dataSource={tableDataSource} columns={colMock} />;
  }
};

const Index = DragSource(
  'box',
  {
    beginDrag, // 开始拖动
    endDrag, // 拖动完成
  },
  (connect: any, monitor: any) => sourceCollect(connect, monitor),
)(AntdFC);

export default Index;
